<template>
	<view class="page">
		<back-top v-if="showTop"></back-top>
		<view class="top-box flex-box align-center">
			<text class="iconfont icon-back" @click="back()"></text>
			<view class="flex flex-box align-center search-box">
				<text class="iconfont icon-search"></text>
				<input class="flex" type="text" v-model="keywords" placeholder="输入商品名称"
				 @confirm="confirm" confirm-type="search" placeholder-class="pla"/>
				<text class="iconfont icon-cancel" v-if='keywords.trim()' @click="clear"></text>
			</view>
			<text class="btn" @click="confirm">搜索</text>
		</view>
		<view class="list" v-if='list && list.length > 0'>
			<view class="item flex-box" v-for="(item,index) in list" :key='index' @click="toUrl('/pages/goods/detail?id='+item.goods_id)">
				<view class="goods-img">
					<image :src="$imgUrls(item.img)" mode="aspectFill"></image>
					<text v-if='item.type == 1'>特价</text>
					<text v-if='item.type == 2'>团购</text>
				</view>
				<view class="flex flex-between cloumn">
					<view>
						<view class="name lines2">{{ item.name }}</view>
						<view class="info lines">{{ item.info }}</view>
					</view>
					<view class="flex-between">
						<view>
							<text class="myPrice">{{ item.price.slice(0,item.price.length-3) }}.</text>
							<text class="price-mini">{{ item.price.slice(item.price.length-2,item.price.length) }}</text>
						</view>
						<view class="up" @click.stop="EditIt(item.goods_id,index,'on')" v-if='item.state == 0'>上架</view>
						<view class="up" @click.stop="EditIt(item.goods_id,index,'off')" v-if='item.state == 1'>下架</view>
					</view>
				</view>
			</view>
		</view>
		<view class="DiLine" v-if='showDiLine'>------- 我也是有底线的 -------</view>
		<empty type='1' v-if='noData' :msg="'没有找到关于“'+keywords+'”商品哦 ~<br>换个关键词试试吧'"></empty>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				showTop: false,
				keywords:'',
				limit: 10,
				page: 10,
				list: [],
				noData: false,
				more:false,
				showDiLine: false,
			};
		},
		onLoad() {
			that = this
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		onPageScroll(e) {
			if(e.scrollTop > 520){
				that.showTop = true
			}else{
				that.showTop = false
			}
		},
		onReachBottom() {
			if(that.more){
				that.getList()
			}
		},
		methods:{
			EditIt(goods_id,index,type){
				that.$http.post({
					url: '/singleSaleManageApi/goodsEdit',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						goods_id: goods_id,
						type: type
					}
				}).then(res => {
					if(res.code == 200){
						that.list.splice(index,1)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			clear(){
				that.keywords = ''
				that.noData = false
				that.page = 1
				that.list = []
			},
			confirm(e){
				that.page = 1
				that.list = []
				that.getList()
			},
			getList(){
				that.noData = false
				that.more = false
				that.showDiLine = false
				that.$http.get({
					url: '/singleSaleManageApi/goodsList',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						limit: that.limit,
						state:'3',
						page: that.page,
						keywords: that.keywords
					}
				}).then(res => {
					if(res.data){
						that.list = that.list.concat(res.data)
						if(res.data.length >= that.limit){
							that.more = true
							that.page ++
						}
					}
					if(that.list.length >= that.limit && !that.more){
						that.showDiLine = true
					}
					if(!that.list || that.list.length < 1){
						that.noData = true
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.page{
	padding-top: 88rpx;
	.top-box{
		padding: 0 $page-space;
		position: fixed;
		background-color: #FFFFFF;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 33;
		border-bottom: 1px solid #f5f5f5;
		height: 88rpx;
		.icon-back{
			font-size: 36rpx;
			color: #666666;
			padding-right: 24rpx;
		}
		.search-box{
			border: 1px solid #DBDBDB;
			padding: 0 16rpx;
			height: 56rpx;
			border-radius: 56rpx;
			.icon-search{
				color: #A9AFB8;
				font-size: 30rpx;
			}
			input{
				font-size: 26rpx;
				padding: 0 10rpx;
			}
			.pla{
				font-size: 26rpx;
			}
			.icon-cancel{
				color: #A9AFB8;
				font-size: 32rpx;
			}
		}
		.btn{
			padding-left: 24rpx;
			font-size: $font-size-lg;
			color: #6E7580;
		}
	}

	.list{
		padding: $page-space;
		.item{
			margin-bottom: $page-space;
			background-color: #FFFFFF;
			padding: 20rpx;
			border-radius: 12rpx;
			.goods-img{
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 20rpx;
				position: relative;
				text{
					background-color: #F6B081;
					padding: 2rpx 6rpx;
					color: white;
					position: absolute;
					left: 0;
					bottom: 0;
					font-size: 22rpx;
					border-radius: 4rpx;
				}
				image{
					width: 100%;
					height: 100%;
				}
			}
			.cloumn{
				width: calc(100% - 200rpx);
			}
			.name{
				font-size: 26rpx;
				font-weight: bold;
			}
			.info{
				color: #999999;
				font-size: 22rpx;
				margin-top: 10rpx;
			}
			.myPrice{
				color: #DB3801;
				font-size: 34rpx;
				font-weight: bold;
			}
			.price-mini{
				color: #DB3801;
				font-weight: bold;
			}
			.up{
				width: 124rpx;
				line-height: 48rpx;
				background-color: $uni-color-primary;
				color: white;
				text-align: center;
				border-radius: 48rpx;
				font-size: 28rpx;
			}
		}
	}
}
</style>
